<html>
  <head>
    <title>Talabatak</title>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="talabatak/stylesheets/order-summary.css" rel="stylesheet" type="text/css"/>
    <link href="talabatak/stylesheets/colors.css" rel="stylesheet" type="text/css"/>

    <script src="talabatak/javascripts/string-patches.js" type="text/javascript"></script>
    <script src="talabatak/javascripts/jquery/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="talabatak/javascripts/order-summary.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="order-summary-container">
      <div class="order-summary-title">Summary to order</div>
      <dl>
        <dt>Foul</dt><dd>4</dd>
        <dt>Falafel</dt><dd>7</dd>
        <dt>Batates</dt><dd>3</dd>
        <dt>Bayd</dt><dd>2</dd>
      </dl>
      <div class="order-summary-title">Summary to distribute</div>
      <table>
        <thead>
          <th colspan="2" style="max-width: 1px;">#</th>
          <th style="max-width: 1px;">Item</th>
          <th style="max-width: 40px;">Unit Price</th>
          <th style="max-width: 40px;">Total Price</th>
        </thead>
        <tbody>
          <tr class="user-row">
            <td colspan="4" style="max-width: 1px;">Mostafa Ali</td>
            <td style="max-width: 1px;">10.5</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Foul</td>
            <td>1.25</td>
            <td>2.5</td>
          </tr>
          <tr class="items-row">
            <td>3</td>
            <td>x</td>
            <td>Falafel</td>
            <td>1.25</td>
            <td>3.75</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Batates</td>
            <td>2.25</td>
            <td>4.5</td>
          </tr>
          <tr class="user-row">
            <td colspan="4" style="max-width: 1px;">Mahmoud Khalid</td>
            <td style="max-width: 1px;">10.5</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Foul</td>
            <td>1.25</td>
            <td>2.5</td>
          </tr>
          <tr class="items-row">
            <td>3</td>
            <td>x</td>
            <td>Falafel Aspany</td>
            <td>1.25</td>
            <td>3.75</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Batates Bel Mayoneeeeeeeeees</td>
            <td>2.25</td>
            <td>4.5</td>
          </tr>
          <tr class="user-row">
            <td colspan="4" style="max-width: 1px;">Ahmed Moawad</td>
            <td style="max-width: 1px;">10.5</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Foul</td>
            <td>1.25</td>
            <td>2.5</td>
          </tr>
          <tr class="items-row">
            <td>3</td>
            <td>x</td>
            <td>Falafel</td>
            <td>1.25</td>
            <td>3.75</td>
          </tr>
          <tr class="items-row">
            <td>2</td>
            <td>x</td>
            <td>Batates</td>
            <td>2.25</td>
            <td>4.5</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>